<template>
	<view>
		<positionContainerVue :show.sync="newShow" pStyle="transform: translateY(-20rpx)" tStyle="transform: translateX(180rpx)" @changeShow="changeShow">
			<template #slot-view>
				<view class="cu-form-group form-item">
					<view class="label"> <span style="color: red">*</span>福利待遇：</view>
					<view class="select-box">
						<view v-show="!selectedList.length" class="placeholder-text">
							请选择福利待遇
						</view>
						<scroll-view v-show="selectedList.length" scroll-x class="scroll-view-x" style="width: 460rpx">
							<view style="display: flex; align-items: center; width: 100%">
								<view class="materialLabel" v-for="(i, j) in selectedList" :key="j">
									{{ i.valueName }}
								</view>
							</view>
						</scroll-view>
						<image
							class="image_yjt"
							:class="{open: newShow}"
							src="https://pic.bangbangtongcheng.com/static/bbzc/fb_yjt.png" />
					</view>
				</view>
			</template>
			<template #position-view>
				<cover-view class="bindFL_frame">
					<cover-view class="center">
						<cover-view class="center_item" v-for="(item, index) in selectList" :key="index">
							<cover-view class="commonScreenContentLi" :class="{active: item.active}" @click="listClick(item)">
								{{ item.valueName }}
							</cover-view>
						</cover-view>
						<cover-view class="center_item">
							<cover-view class="commonScreenContentLi custom" @click="custom()"> +自定义 </cover-view>
						</cover-view>
					</cover-view>
				</cover-view>
			</template>
		</positionContainerVue>
		
		<!-- 增加福利 -->
		<uni-popup ref="bindAddFL" type="center" :animation="false">
			<view class="bindAddFL_frame">
				<view class="title">
				<view class="title_right"></view>
				<view class="title_center"> 福利待遇 </view>
				<view class="title_right" @click="bindAddFL_close">
					<image
					class="image"
					src="https://pic.bangbangtongcheng.com/static/bbzc/FuLiClose.png"
					></image>
				</view>
				</view>
				<view class="center">
					<input
						ref="inputRef"
						class="inputs"
						v-model="benefitText"
						placeholder="请输入福利名称"
						type="text"
						@input="addFuliInput"
					/>
					<span class="inputs_zis">{{ benefitText.length }}/4</span>
				</view>
				<view class="bottoms" @click="accomplishCustom"> 完成 </view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import positionContainerVue from '../../../components/position-container/position-container.vue';

	
	export default {
		model: {
			prop: 'show',
			event: 'update:show'
		},
		props: {
			show: {
				type: Boolean
			},
			benefitList: {
				type: Array,
				default: () => ([])
			},
			selectedList: {
				type: Array,
				default: () => ([])
			},
		},
		watch: {
			benefitList: {
				handler(val){
					if (val && val.length) {
						this.selectList = JSON.parse(JSON.stringify(val));
					}
				},
				deep: !0,
				immediate: !0,
			},
			show(val){
				this.newShow = val;
			}
		},
		components: {
			positionContainerVue,
		},
		data() {
			return {
				newShow: false,
				benefitText: '',
        		// selectedList: [],
				selectList: [],
				// benefitList: [],
			}
		},
		methods: {
			changeShow(){
				this.$emit('update:show',this.newShow);
				this.$emit('changeShow', 'benefit');
			},
			listClick(item) {
				this.selectList.forEach((v) => {
					if (v.valueName == item.valueName) {
						v.active = !v.active
					}
				})
				this.$emit('changeItem',this.selectList.filter(v => v.active));
			},
			addFuliInput(e) {
				// console.log(e);
				// 苹果输入法会有英文字母占位，所以使用maxlength 会有bug
				this.$nextTick(() => {
					this.benefitText = (e.detail.value && e.detail.value.slice(0, 4)) || '';
				})
			},
			custom() {
				this.newShow = false;
				this.changeShow();
				this.$refs.bindAddFL.open()
			},
			accomplishCustom() {
				if (this.benefitText == '') {
					uni.showToast({
						title: '福利名称不能为空',
						icon: 'none',
						mask: true,
					})
					return false
				}
				this.selectList.forEach((i, j) => {
					if (i.valueName == this.benefitText) {
						this.type1.splice(j, 1)
					}
				})
				const item = {
					valueName: this.benefitText,
					active: false,
				}
				this.selectList.push(item);
				this.benefitText = ''
				this.bindAddFL_close()
				this.listClick(item);
			},
			bindAddFL_close() {
				this.benefitText = ''
				this.$refs.bindAddFL.close()
			},
		}
	}
</script>

<style lang="less" scoped>
.form-item {
	background-color: #ffffff;
	border-top: 2rpx solid #eee;
	border-bottom: 2rpx solid #eee;
	padding: 0 30rpx;
	.label {
		width: 160rpx;
	}
	.select-box {
		width: calc(100% - 160rpx);
		display: flex;
		align-items: center;
		justify-content: space-between;
		.placeholder-text {
			font-size: 24rpx;
			color: #CCCCCC;
		}
		.scroll-view-x {
			width: calc(100% - 50rpx);
			.materialLabel {
				flex-shrink: 0;
				padding: 0 20rpx;
				height: 50rpx;
				border-radius: 8rpx;
				border: 1px solid #64b6a8;
				font-size: 24rpx;
				font-weight: 400;
				color: #64b6a8;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 10rpx;
			}
		}
		.image_yjt {
			width: 48rpx;
			height: 48rpx;
			transition: all 0.5s;
			&.open {
				transform: rotate(-90deg);
			}
		}
	}
}


.bindFL_frame {

	.title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 34rpx;

		.title_center {
		font-size: 34rpx;
		font-weight: 600;
		color: #000000;
		}

		.title_right {
		font-size: 36rpx;
		font-weight: normal;
		color: #64b6a8;
		}
	}

	.center {
		display: flex;
		align-items: center;
		flex-wrap: wrap;

		.center_item {
			//width: 33%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 20rpx;

			.yyds {
				width: 170rpx;
				height: 62rpx;
				border-radius: 8rpx;
				border: 1px solid #999999;
				font-size: 30rpx;
				font-weight: 400;
				color: #999999;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.yyds_active {
				border: 1px solid #64b6a8;
				background-color: #64b6a8;
				color: #fff;
			}

			.custom {
				width: 150rpx;
				height: 60rpx;
				border-radius: 8rpx;
				font-size: 30rpx;
				font-weight: 400;
				color: #999999;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
}


.commonScreenContentLi {
    width: 150rpx;
    height: 60rpx;
    background: #ffffff;
    border-radius: 10rpx;
    border: 1rpx solid #ebebed;
    text-align: center;
    line-height: 60rpx;
    margin: 6rpx;
    font-weight: 400;
    font-size: 28rpx;
    color: #333333;
	&.active {
		background: #e7f5f4;
		border: 1rpx solid #0fa291;
		color: #0fa291;
		position: relative;
		&::after {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			content: '';
			background-image: url(https://pic.bangbangtongcheng.com/static/selectd-zhaocai-index.png);
			background-repeat: no-repeat;
			background-position: right bottom;
			background-size: 28rpx 28rpx;
		}
	}
}

.bindAddFL_frame {
		background-color: #ffffff;
		width: 600rpx;
		height: 250rpx;
		border-radius: 10rpx;
		padding: 28rpx 32rpx 10rpx 32rpx;

		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 34rpx;

		.title_center {
			font-size: 30rpx;
			font-weight: 400;
			color: #000000;
		}

		.title_right {
			width: 32rpx;
			height: 32rpx;

			.image {
				width: 100%;
				height: 100%;
			}
		}
    }

    .center {
		width: 540rpx;
		height: 60rpx;
		border-radius: 8rpx;
		border: 1px solid #999999;
		position: relative;

		.inputs {
			width: 100%;
			height: 100%;
			padding: 4rpx 10rpx;
		}

		.inputs_zis {
			position: absolute;
			right: 10rpx;
			top: 50%;
			transform: translateY(-50%);
		}
    }

    .bottoms {
		width: 100%;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
    }
}
</style>
